<template>
    <view>
        <!-- <page-head :title="title"></page-head> -->
		<view class="search-bar">
			<view class="search-box">
				<image lazy-load="true"  src="../../static/images/search-img.png" class="search-img"></image>
				<input type="text" class="search-inp" confirm-type="search" @confirm="getVal" v-model="inputVal" placeholder="搜索门店" placeholder-style="color:#cccccc" />
				<image lazy-load="true" v-if="inputVal" @click="cleanInput()"  src="../../static/images/close-btn.png" class="close-btn"></image>
			</view>
		</view>
        <view class="uni-common-mt">
            <view>
                <map :latitude="latitude" :longitude="longitude" @markertap="markertap" :include-points="points" :show-location="showLocation" :markers="markers" :polyline="polyline"></map>
            </view>
        </view>
		<view class="shop-box" :class="{'active':show}">
			
			<view class="tit" @click="showShopList">
				<text v-if="!show">查看所有门店</text> 
				<text v-if="show">收起门店列表</text> 
				<image lazy-load="true"  src="../../static/images/shop-1.png" class="shop-top" :class="{'rotate':show}"></image>
			</view>
			<view class="shop-list-box" :class="[{'long':show},{'active1':!show}]" >
				<view class="shop-list" v-for="(item , key) in shopList" :key="key">
					<view class="list-box">
						<view class="list-1">
							<view class="shop-msg">
								<view class="shop-name">{{item.name}}</view>
								<view class="shop-t">距离您{{item.gap}} | <block>{{item.area}}</block></view>
							</view>
						</view>
						<view class="list-2">
							<image src="../../static/images/jindian.png"  @click="goShopHome(item.id)" class="jindian"></image>
							<image src="../../static/images/daohang.png" class="daohang" @click="goHere(item.lat,item.lng)"></image>
						</view>
					</view>
					<view class="list-menu">
						<view class="parts" @click="addFollw(item.id)">
							<image src="../../static/images/shoucang2.png" class="part-ico"></image>
							<view class=""><block v-if="item.is_follow">已</block>收藏</view>
						</view>
						<!-- #ifdef MP-WEIXIN -->
						<button open-type="share" class="parts">
							<image src="../../static/images/fenxiang2.png" class="part-ico"></image>
							<view class="">分享</view>
						</button>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<button class="parts" @click="showShare">
							<image src="../../static/images/fenxiang2.png" class="part-ico"></image>
							<view class="">分享</view>
						</button>
						<!-- #endif -->
						<view class="parts" @click="goCall(item.tel)">
							<image src="../../static/images/dianhua2.png" class="part-ico"></image>
							<view class="">电话</view>
						</view>
						<view class="parts">
							<image src="../../static/images/shijian2.png" class="part-ico"></image>
							<view class="">{{item.time}}</view>
						</view>
					</view>
					<!-- <view class="list-1">
						<view class="shop-msg">
							<view class="shop-name">{{item.name}}<text class="add-join" @click="addFollw(item.id)"><block v-if="item.is_follow">已</block><block v-if="!item.is_follow">+</block>收藏</text></view>
							<view class="shop-address" @click="goShopHome(item.id)">{{item.address}}</view>
							<view class="shop-phone" @click="goCall(item.tel)">
								<image lazy-load="true"  src="../../static/images/dianhua.png" class="tel-img"></image>
								{{item.tel}}
							</view>
							<view class="shop-time" @click="goShopHome(item.id)">
								{{item.time}}
							</view>
						</view>
					</view>
					<view class="list-2">
						<view class="" @click="goShopHome(item.id)">门店详情 ></view>
						<view class="gap" @click="goHere(item.lat,item.lng)">
							<image lazy-load="true"  src="../../static/images/weizhi.png" class="address-img"></image>
							{{item.gap}}
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="share-h5-box" @click="hide_share_box" v-if="share_h5_box == 1">
			<image src="../../static/images/share5.png" class="share-h5-img"></image>
		</view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                title: 'map',
                latitude: '',
                longitude: '',
				showLocation:true,
				shop_name:'',
				share_h5_box:0,
                markers: [
				
				],
				points:[
					
					
				],
				shopList:[
					
				],
				show:false,
				inputVal:''
            }
        },
		onShareAppMessage(res) {
		    if (res.from === 'button') {
		      console.log(res.target)
		    }
		    return {
		      title: this.$request.share_title,
		      path: '/pages/index/index'
		    }
		  },
        methods: {
			showShare(){
				this.share_h5_box = 1;
			},
			hide_share_box(){
				this.share_h5_box = 0;
			},
			cleanInput(){
				this.inputVal='';
				this.shop_name='';
				this.getShopList();
			},
			markertap(e){
				var self = this;

				var marker_id = e.markerId || e.detail.markerId;
				console.log(marker_id)
				for(var i =0;i<self.markers.length;i++){
					var markerId = self.markers[i].id;
					this.$set(self.markers[i], "iconPath", "../../static/images/mmm.png");  
					if(markerId==marker_id){
						this.$set(self.markers[i], "iconPath", "../../static/images/mmm1.png"); 
					}	
				}
				var newObj = '';
				for(var a =0;a<self.shopList.length;a++){
					var shopListId = self.shopList[a].id;
					if(shopListId == marker_id){
						newObj = self.shopList[a];
						self.shopList.splice(a,1);
						console.log(newObj);
						break;
					}
				}
				self.shopList.unshift(newObj);
					
			},
			showShopList(){
				this.show = !this.show
			},
			goShopHome(id,lat,lng){
				uni.navigateTo({
				    url: '../local-store-home/local-store-home?id='+id+'&lat='+this.latitude+'&lng='+this.longitude
				});
			},
			goHere(lat,lng){
				var self = this;
				// #ifdef MP-WEIXIN
				uni.openLocation({
				    latitude: parseFloat(lat),
				    longitude: parseFloat(lng),
				    success: function () {
				        console.log('success');
				    }
				}); 
				// #endif
				 
				// #ifdef H5
				self.wx.openLocation({
				  latitude: parseFloat(lat), // 纬度，浮点数，范围为90 ~ -90
				  longitude: parseFloat(lng), // 经度，浮点数，范围为180 ~ -180。
				  name: '', // 位置名
				  address: '', // 地址详情说明
				  scale: 13, // 地图缩放级别,整形值,范围从1~28。默认为最大
				  infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
				});	
				// #endif  
				  
				
			},
			getVal(e){
				this.shop_name = e.detail.value;
				this.getShopList();
			},
			addFollw(id){
				var self = this;
				self.shopList.forEach((item,index)=>{
					if(item.id == id){
						if(!item.is_follow){
							self.$request.request({
								url:'/store/follow',
								data:{
									store_id:id
								},
								success:function(res){
									if(res.code==200){
										uni.showToast({
											title:'收藏成功~',
											icon:'none',
											duration:2000
										});
										self.shopList[index].is_follow = true;
									}
									if(res.code==40003){
										uni.navigateTo({
											url:'../login/login?page=shop'
										})
									}
								}
							})
						}
					}
				})

			},
			goCall(tel){
				uni.makePhoneCall({
				    phoneNumber: tel
				});
			},
			goHome(){
				uni.reLaunch({
					url:'../index/index'
				})
			},
			getShopList(){
				var self = this;
				self.$request.request({
					url:'/store/list',
					data:{
						lng:self.longitude,
						lat:self.latitude,
						p:1,
						name:self.shop_name,
						per:200,
					},
					success:function(res){
						if(res.code==200){
							var x = res.result;
							var y=[];
							var z=[];
							var xx=[];
							x.forEach((item,index)=>{
								x[index].logo =self.$http_img(item.logo);
								y[index] = {
									id:item.id,
									latitude:item.lat,
									longitude:item.lng,
									iconPath:'../../static/images/mmm.png',
									width:'32',
									height:'45',
								};
								z[index]={
									id:item.id,
									name:item.name,
									lat:item.lat,
									lng:item.lng,
									is_follow:item.is_follow,
									address:item.province+item.city+item.area+item.address,
									area:item.area,
									tel:item.tel,
									time:item.work_time,
									gap:parseInt(item.distance)>1000 ? parseFloat(parseInt(item.distance/100)/10)+'km' : parseInt(item.distance)+'m'
								}
								xx[index]={
									latitude:item.lat,
									longitude:item.lng
								}
							});
				
							self.markers = y;
							self.shopList = z;
							self.points=xx;
				
						}else{
							
						}
					}
				})
			}

        },
		onLoad() {
			
			
		},
		onShow() {
			var self = this;
			self.share_h5_box = 0;
			uni.getLocation({
			    type: 'wgs84',
			    success: function (res) {
					console.log(res)
					self.latitude = res.latitude;
					self.longitude = res.longitude;
					// self.points[0].latitude = res.latitude;
					// self.points[0].longitude = res.longitude;
					
					self.getShopList();
					
			    },
				fail() {
					self.latitude = 30.657420;
					self.longitude = 104.065840;
					self.getShopList();
				}
			});
			
			// #ifdef H5
			let share_time_line={
				title:self.$request.h5_share_name, // 分享标题
				link: self.$request.h5_share_url+'?page=shop', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
			}
			let share_app_message={
				title: self.$request.h5_share_name, // 分享标题
				desc: '这个店铺很不错哟，还可以到店体验，推荐给你！', // 分享描述
				link: self.$request.h5_share_url+'?page=shop', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
			}
			uni.setStorageSync('share_time_line',share_time_line);
			uni.setStorageSync('share_app_message',share_app_message);
			self.$request.wx_config()
			// #endif
		
		}
    }
</script>
<style>
	.search-bar{
		position: fixed;
		left: 0;
		top:25upx;
		width: 95%;
		margin-left: 2.5%;
		height: 80upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		z-index: 99999;
		
	}
	.now-address{
		height: 60upx;
		border-bottom: 1px solid #595959;
		line-height: 60upx;
		margin-top: 20upx;
		font-size: 16px;
	}
	.search-box{
		position: relative;
		box-sizing: border-box;
		width: 100%;
		height: 80upx;
		background-color: #FFFFFF;
		border-radius: 50upx;
		padding-left: 60upx;
		font-size: 12px;
		margin-top: 20upx;
		line-height: 80upx;
	}
	.search-inp{
		width: 90%;
		height: 80upx;
		line-height: 80upx;
	}
	.close-btn{
		width: 30upx;
		height: 30upx;
		position: absolute;
		/* #ifdef MP-WEIXIN */
		right: 205upx;
		/* #endif */
		/* #ifdef H5 */
		right: 40upx;
		/* #endif */
		top: 26upx;
		z-index: 999;
	}
	.goHome1{
		position: absolute;
		height: 60upx;
		right: 0;
		top:0;
		border-left: 1px solid #F9F9F9;
		padding: 0 20px;
		z-index: 99;
		background-color: #DDDDDD;
		border-top-right-radius: 30upx;
		border-bottom-right-radius: 30upx;
	}
	.search-img{
		position: absolute;
		width: 28upx;
		height: 28upx;
		left: 20upx;
		top:30upx;
	}
    map {
        width: 100%;
        height: calc(100vh - 73px - 80upx);
    }
    .test{
        background: #fff;
        height: 100upx;
        text-align: center;
        display: flex;
        margin: 30upx;
    }
	.shop-box{
		position: fixed;
		width: 100%;
		left: 0;
		bottom: var(--window-bottom);
		background-color: #FFFFFF;
		box-shadow: 0px -5upx 5upx #F0F0F0;
		border-top-left-radius: 40upx;
		border-top-right-radius: 40upx;
		display: flex;
		flex-direction: column;
		z-index: 99;
	}
	.tit{
		font-size: 14px;
		text-align: center;
		padding: 20upx;
		border-bottom: 1px solid #F0F0F0;
	}
	.shop-top{
		width: 17upx;
		height: 19upx;
		margin-left: 10upx;
	}
	.shop-list-box{
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.share-h5-box{
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.7);
		left: 0;
		top: 0;
		z-index: 999999;
	}
	.share-h5-img{
		width: 100%;
	}
	.shop-list{
		display: flex;
		flex-direction: column;
		padding: 20upx;
		flex-shrink:0;
	}
	.list-box{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.list-1{
		display: flex;
		flex-direction: row;
	}
	.list-2{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		font-size: 14px;
	}
	.shop-img{
		width: 132upx;
		height:132upx;
	}
	.shop-msg{
		display: flex;
		flex-direction: column;
		/* margin-left: 20upx; */
	}
	.tel-img{
		width: 18upx;
		height: 22upx;
		margin-right: 10upx;
	}
	.list-menu{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border-top:1px solid #ededed ;
		border-bottom:1px solid #ededed ;
		margin-top: 20upx;
	}
	.parts{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		padding: 10upx 0;
		flex-shrink: 0;
	}
	.parts:last-child{
		border-right:none ;
	}
	.part-ico{
		width: 27upx;
		height: 27upx;
		margin-right: 10upx;
	}
	.shop-name{
		font-size: 16px;
		color: #000000;
		width: 350upx;
		font-weight: bold;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.shop-t{
		font-size: 13px;
	}
	.add-join{
		color: #cccccc;
		margin-left: 20upx;
		font-size: 14px;
	}
	.jindian{
		width:109upx;
		height: 50upx;
		margin-right: 20upx;
	}
	.daohang{
		width:162upx;
		height: 50upx;
	}
	.shop-address{
		color: #999999;
		font-size: 12px;
		width: 400upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.shop-phone{
		color: #7887a5;
		font-size: 14px;
		margin-top: 10upx;
	}
	.shop-time{
		color: #999999;
		font-size: 12px;
	}
	.address-img{
		width: 32upx;
		height: 24upx;
	}
	.gap{
		color: #7887a5;
	}
	.long{
		max-height: calc(100vh - 140upx);
		overflow-y: auto;
	}
	.active{
		height: calc(100vh - 250upx);
	}
	.rotate{
		transform:rotate(180deg);
	}
	.shop-msg{
		width: 400upx;
	}
	.active1{
		height:200upx;
	}
	button {
	position:relative;
	display:flex;
	margin-left:0;
	margin-right:0;
	padding-left:0;
	padding-right:0;
	box-sizing:border-box;
	font-size:14px;
	text-align:center;
	text-decoration:none;
	line-height:none;
	border-radius:0;
	-webkit-tap-highlight-color:transparent;
	overflow:hidden;
	color:#000000;
	background-color:#FFFFFF;
	border:none;
	}
	button::after {
	  border: none;
	}
</style>